<template>
    <div class="singer-song">
    <!-- 歌曲列表 -->
    <div class="list">
      <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">

      <div v-for="(item,index) in list" :key="index" :title="item" class="song">
      <h3>{{item.name}}</h3> 
      <div class="singers">
        <span v-for="(singer,index) in item.singer" :key="singer.id">
        {{singer.name}}
        <span v-show="index!=item.singer.length-1">/</span>
        </span>
        <span v-show="item.album">
        <span>.</span>
        <span>{{item.album.name}}</span>
        </span>
      </div>
      </div>
    </van-list>
    </div>
    </div>
    
</template>
e
<script>
export default {
    props: ['singerId'],
    data() {
        return{
            list: [],
            loading: false, //加载状态
            finished: false, //是否完成
            page: 1,
        }
    },
    created(){
        this.getData(this.singeId,1,10)
    }, 
    methods:{
        getData(){
            this.$request("get", "/singer/songs", 
             { 
                singermid: this.singerId,
                num:30,
                page: 1})
            .then(
                (res) => {
                    console.log(res);
                    this.list = this.list.concat(res.data.list);
                    //加载状态结束
                    this.loading = false;
                    this.page++;
                    //数据全部加载完成
                    if (res.data.list.length == 0){
                        this.finished = true;
                    }
                }
            )
        },
        onLoad(){
      setTimeout(()=>{
        this.getData();//调用获取分页数据的方法
        this.loading = true;//正在加载
      },1000)
    }
   
    },
   
};
</script>
<style scoped>
.song>h3{
  text-align: left;
  padding: 0 2rem;
  color: rgba(0, 0, 0, 0.856);
}
.singers{
  text-align: left;
  padding: 0 2rem;
}
.singers span{
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.303);
}
.singers>span:nth-last-child(1)>span:nth-child(1){
  margin: 0 0.3rem;
  font-weight: 900;
  color: rgba(255, 213, 0, 0.56);
}
</style>

